{% extends 'base_header.html' %}

{% block title %}
    购物车
{% endblock %}

{% block head %}
    <script>
        {#合计#}
        function total_all(){
            {#计算每个选中的行#}
            total_price = 0
            total_count = 0
            {#循环取出每件商品的数量和价格进行计算总价,计算被选中的商品条目数量#}
            $(':checked:not("#checkall")').each(function () {
                count = parseInt($(this).parent().siblings('.col06').find('input').val())
                price = parseFloat($(this).parent().siblings('.col05').find('em').text())
                total = count * price
                total_price += total
                total_count++
            })
            {#展示总价格#}
            $('#total_price').text(total_price.toFixed(2))
            {#展示选中的商品条目#}
            $('#total_count').text(total_count)
            $('#totalnum').text(total_count)
        }
        {#计算小计#}
        function total_s(){
            $('.col07').each(function () {
                count = $(this).prev().find('input').val()
                price = $(this).prev().prev().find('em').text()
                total = count * price
                {#toFixed 控制浮点数的精度#}
                $(this).text(total.toFixed(2))
            })
        }
        {#删除购物车中的商品#}
        function delete_cart(cart_id){
            var delete_url = '/cart/delete/' + cart_id + '/'
            $.get(delete_url,function (state) {
                $('ul').remove('ul[id='+ cart_id + ']')
                total_all()
            })
        }

        $(function () {
            total_all();
            total_s()

            {#全选或者全消#}
            $('#checkall').click(function () {
                {#prop('checked') 获取checked属性的值: true/faulse#}
                state = $(this).prop('checked')
                $(':checkbox:not("checkall")').prop('checked',state)
                total_all()
            })
            {#商品数加#}
            $('.add').click(function () {
                num = parseInt($(this).next().val())
                $(this).next().val(num+1).blur()
                total_s()
                total_all()
            })
            {#商品数减#}
            $('.minus').click(function () {
                num = parseInt($(this).prev().val())
                if (num>1){
                    $(this).prev().val(num-1).blur()
                }
                total_s()
                total_all()
            })
            {#修改一个商品的选中状态,同时修改全选的状态,然后修改总价#}
            $('.check').click(function () {
                {#获取当前被选中的复选框的个数,不包含全选的复选框#}
                if($(this).prop('checked')){
                    check_number = $('.check:checked').length
                    if(check_number == $('.input[type="checkbox"]').length-1){
                        {#设置全选复选框为选中状态#}
                        $('#checkall').prop('checked',true)
                    }
                }else{
                    {#如果不满足上述条件,修改全选复选框状态为false#}
                    $('#checkall').prop('checked',false)
                }
                {#修改选中的商品的总价和选中商品的个数#}
                total_all()
            })
            {#修改购物车中商品的数量#}
            $('.num_show').blur(function () {
                current_count = parseInt($(this).val())
                stock =$(this).parent().attr('id')
                if (current_count > stock){
                    $(this).val(stock)
                }
                {#同步到数据库的购物车#}
                cart_id = $(this).parent().parent().attr('id')
                url = '/cart/update/' + cart_id + '/' + $(this).val() + '/'
                $.get(url,function (data) {
                    total_s()
                    total_all()
                })
            })
        })
    </script>
{% endblock %}

{% block body %}
    <div class="total_count">全部商品<em id="totalnum">{{ carts.length }}</em>件</div>
    <ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
    {% if carts %}
    <form action="{% url 'order:order' %}" method="get">
    {% for cart in carts %}
        <ul class="cart_list_td clearfix" id="{{ cart.id }}">
            <li class="col01"><input class="check" type="checkbox" name="cart_id_list" value="{{ cart.id }}" checked></li>
            <li class="col02"><img src="{{ cart.goods.pic }}"></li>
            <li class="col03">{{ cart.goods.goods_name }}<br><em>{{ cart.goods.price }}元/{{ cart.goods.unit }}</em></li>
            <li class="col04">{{ cart.goods.unit }}</li>
            <li class="col05"><em>{{ cart.goods.price }}</em>元</li>
            <li class="col06" id="{{ cart.id }}">
                <div class="num_add" id="{{ cart.goods.stock }}">
                    <a href="javascript:;" class="add fl">+</a>
                    <input type="text" class="num_show fl" value="{{ cart.count }}">
                    <a href="javascript:;" class="minus fl">-</a>
                </div>
            </li>
            <li class="col07">25.80元</li>
            <li class="col08"><a href="javascript:delete_cart({{ cart.id }});">删除</a></li>
        </ul>
    {% endfor %}

    <ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked id="checkall"></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em id="total_price">42.60</em><br>共计<b id="total_count">2</b>件商品</li>
		<li class="col04"><input type="submit" value="结算"></li>
	</ul>
    </form>
    {% else %}
        <p class="cart_list_td clearfix" style="font-size: 25px !important">您的购物车空空如也...</p>
    {% endif %}
{% endblock %}